<template>
  <addItem @addTodoItem="addTodoItem"/>
  <filterT :filterType="filterType" @selectFilter="selectFilter"/>
  <todoList :todoArr="todoArrAfFilter" @toggle="toggle"/>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import filterT from './filter.vue'
import addItem from './addItem.vue'
import todoList from './todoList.vue'
import {FilterType, TodoItem} from './type.d.ts'
import {useFilter, useTodoArr} from './composables'


export default defineComponent({
  components: {todoList, addItem, filterT},
  setup() {
 
    debugger
    const {filterType, selectFilter} = useFilter()
    const { addTodoItem, toggle, todoArr} = useTodoArr()

    // 计算属性
    const todoArrAfFilter = computed(() => {
      if (filterType.value === FilterType.ALL) return todoArr.value
      if (filterType.value === FilterType.FINISHED) return todoArr.value.filter(item => item.checked)
      if (filterType.value === FilterType.UNFINISHED) return todoArr.value.filter(item => !item.checked)
    })

    return {
      todoArrAfFilter,
      filterType,
      addTodoItem,
      selectFilter,
      toggle
    }
  }
})

</script>



